<template>
	<z-paging ref="paging" v-model="attractionList" @query="getScenicList">
		<div class="header">
			<uni-search-bar :class="showMap?'header-search':'header-search-map'" @confirm="search" :focus="false"
				v-model="searchValue" @blur="blur" @input="input" cancelButton="none" @clear="clear"
				placeholder="请输入景点名称">
			</uni-search-bar>
			<div v-show="showMap">
				<image src="../../static/shengchengditu.png" class="generate-map" @click="generateMap"></image>
			</div>
		</div>
		<div class="attraction-list">
			<div v-for="(item,index) in attractionList" :key="index" class="attraction-list-for">
				<navigator :url="'/attractionPages/sence/ScenicInfo?id='+item.id" hover-class="navigator-hover">
					<div class="attraction-obj">
						<image :src="item.imgUrl==null?senceDefaultImg:item.imgUrl" class="attraction-obj-img" />
						<div class="attraction-obj-text">
							<p class="attraction-obj-title">{{item.name}}</p>
							<p class="attraction-obj-level">
								{{item.level}}
							</p>
							<p class="attraction-obj-rating">
								<p>推荐指数:</p><uni-rate v-model="item.rating" readonly="true"/>
							</p>
							<p class="attraction-obj-address">景区地址：{{item.address}}</p>
						<!-- 	<p class="attraction-obj-time">开放时间：{{item.openTime}}</p> -->
						</div>
					</div>
				</navigator>
			</div>
		</div>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReachBottom,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import uniRequest from '@/components/request.js';

	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	const paging = ref(null)

	useZPaging(paging)
	let senceDefaultImg = "/static/noneimage.jpg"
	let attractionList = ref([])
	let currentPage = 1
	let selectCityId = "320100"
	let citySelectedValue = ref('')
	let showMap = ref(true)
	// 搜索框
	let searchValue = ref("")
	const blur = (res) => {
		searchValue.value = res.value
		paging.value.reload()
	}
	const input = (res) => {
		console.log('----input:', res)
	}
	const search = (res) => {
		searchValue.value = res.value
		paging.value.reload()
	}
	const clear = (res) => {
		searchValue.value = ""
		paging.value.reload()
	}
	// 搜索框结束

	const generateMap = () => {
		uni.navigateTo({
			url: "/pages/sencemap/SenceMapVue?cityId=" + selectCityId
		})
	}

	// 加载默认城市搜索
	onLoad((params) => {
		console.log(params)
		const cityId = params.cityId;
		if (cityId && cityId != '') {
			selectCityId = cityId
		}
		if (params.searchValue != null && params.searchValue != '') {
			searchValue.value = params.searchValue;
			selectCityId = ""
			showMap.value = false
		}
	})

	const getScenicList = (pageNo, pageSize) => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getScenicList',
			method: 'POST',
			data: {
				"current": pageNo,
				// "nameOrCityCode": selectCityId,
				"adCode": selectCityId,
				"name": searchValue.value,
				"size": pageSize
			},
			success(res) {

				res.data.data.records.map(r => {
					r.level = r.level == null ? "非A级景点" : "AAAAA ".slice(0, r.level)
				})
				console.log(res.data.data.records)
				paging.value.complete(res.data.data.records);
			},
			fail(err) {
				paging.value.complete(false);
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}

	// 下拉加载
	onReachBottom(() => {
		paging.value.reload()
	})
</script>

<style lang="scss">
	/*header*/
	.header {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.header-search {
		width: 86%;
	}

	.header-search-map {
		width: 100%;
	}

	/*header结束*/
	/*景点列表*/
	.attraction-list-for {
		width: 100%;
	}

	.attraction-obj {
		display: flex;
		flex-direction: row;
		height: 300rpx;
		margin-top: 20rpx;
		margin-left: 10px;
		margin-right: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.attraction-obj-img {
		width: 30%;
		height: 220rpx;
		margin-top: 40rpx;
		margin-left: 10px;
	}

	.attraction-obj-text {
		width: 60%;
		margin-top: 48rpx;
		margin-left: 20px;
	}

	.attraction-obj-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	// .attraction-obj-time {
	// 	max-height: 100rpx;
	// 	font-size: 24rpx;
	// 	margin-top: 10rpx;
	// 	overflow: hidden;
	// 	/* 确保超出容器的文本被裁剪 */
	// 	white-space: nowrap;
	// 	/* 确保文本在一行内显示 */
	// 	text-overflow: ellipsis;
	// 	/* 使用省略号表示文本超出 */
	// }

	.attraction-obj-address {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.attraction-obj-rating {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}

	/*景点列表结束*/

	.generate-map {
		margin-top: 12rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.attraction-obj-level {
		color: brown;
	}
</style>